<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Map Example</title>
		
		<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=6ff410ba7c2ea14b945ebc22b206487b"></script>
		<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>

		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/map.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>

		<style type="text/css">
			#container {
				width: 100%;
				height: 100%;
			}
			
			.amap-touch-toolbar .amap-zoomcontrol {
				bottom: -40px;
			}
			
			.marker-text {
				font-size: 10px;
				color: #666;
				position: absolute;
				width: 80px;
			}
		</style>
	</head>

	<body>
		<div onclick="back()" class="top-header-left">
			<img src="../images/arrow-left-icon.png" />
		</div>
		<div class="top-header-right">
			<div class="dengji">
				3级
			</div>
			<div id="jindutiao" class="jindutiao">
				<p class="mui-progressbar mui-progressbar-success" data-progress="20"><span></span></p>
			</div>
			<img id="headimgurl" src="" />
		</div>
		<div id="container"></div>
		<div id="bottom-tabbar" class="bottom-tabbar">
			<div id="shouji" class="item">
				<img src="../images/shouji-icon.png" />
				<div class="">
					收集
				</div>
			</div>
			<div id="jiangli" class="item">
				<img src="../images/jiangli-icon.png" />
				<div class="">
					奖励
				</div>
			</div>
			<div id="scan-code" class="item">
				<img src="../images/saoyisao-icon.png" />
				<div class="">
					扫一扫
				</div>
			</div>
			<div id="paiming" class="item">
				<img src="../images/paiming-icon.png" />
				<div class="">
					排名
				</div>
			</div>
			<div id="xiangxi" class="item">
				<img src="../images/xiangqing-icon.png" />
				<div class="">
					详细
				</div>
			</div>
		</div>

		<!--弹窗景区介绍-->
		<div id="tanchuang" class="tanchuang">
			<img id="tanchuangimg" src="../images/shuijiao.jpg" />
		</div>

		<script src="../js/map.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var headimgurl = plus.storage.getItem('headimgurl');
			document.getElementById('headimgurl').setAttribute('src', headimgurl)
			//进度条
			mui("#jindutiao .mui-progressbar").each(function() {
				mui(this).progressbar({
					progress: this.getAttribute("data-progress")
				}).show();
			});
			
			mui('.top-header-right').on('tap', 'img', function() {
				var w = plus.webview.create('personalInfo.html');
				plus.webview.show(w,'fade-in',300);
			})

			mui('#bottom-tabbar').on('tap', '.item', function() {
				var targetTab = this.getAttribute('id');
				var w;
				switch(targetTab) {
					case 'shouji':
						w = plus.webview.create('collectList.html');
						plus.webview.show(w,'fade-in',300);
						break;
					case 'jiangli':
						w = plus.webview.create('rewardList.html');
						plus.webview.show(w,'fade-in',300);
						break;
					case 'scan-code':
						w = plus.webview.create('barcode_scan.html');
						plus.webview.show(w,'fade-in',300);
						break;
					case 'paiming':
						w = plus.webview.create('rankingList.html');
						plus.webview.show(w,'fade-in',300);
						break;
					case 'xiangxi':
						w = plus.webview.create('detail.html');
						plus.webview.show(w,'fade-in',300);
						break;
					default:
					
						break
				}
			})

			
		</script>
	</body>

</html>